<template>
  <el-container class="container-outer">
    <!-- 头部区域 -->
    <el-header height="60px">
      <div>
        <img src="../assets/img/sign.png" alt="" style="width: 50px" />
        <span>疆味后台管理系统</span>
        <div class="el-login">
          <el-dropdown>
            <span
              style="
                font-size: 16px;
                line-height: 60px;
                margin-right: 10px;
                color: #000;
              "
              >{{ user.username
              }}<i
                class="el-icon-arrow-down el-icon--right"
                style="font-size: 12px"
              ></i
            ></span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-link
                  type="primary"
                  @click="changePasswordFlag = true"
                  style="margin-right: 10px; color: #000"
                  >修改密码</el-link
                >
              </el-dropdown-item>
              <el-dropdown-item>
                <el-link type="primary" @click="logout" style="color: #000"
                  >退出</el-link
                ></el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </el-header>
    <el-dialog
      title="请输入必要信息："
      :visible.sync="changePasswordFlag"
      width="40%"
      center
      top="20vh"
    >
      <span class="title">原密码：</span
      ><el-input v-model="passwordObj.oldPassword" size="small" type="password">
      </el-input>
      <span class="title">新密码：</span
      ><el-input v-model="passwordObj.newPassword" size="small" type="password">
      </el-input>
      <span class="title">重复新密码：</span>
      <el-input
        v-model="passwordObj.newPasswordRepeat"
        size="small"
        type="password"
      >
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="
            passwordObj = {};
            changePasswordFlag = false;
          "
          >取 消</el-button
        >
        <el-button type="primary" @click="changePassword()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 页面主体 -->
    <el-container class="container-main">
      <!-- 侧边栏 -->
      <el-aside width="null">
        <!-- 定义侧边栏伸缩，单一菜单展开，默认激活菜单，选择效果，以及路由 -->
        <el-menu
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
          unique-opened
          :default-active="defaultActiveMenu"
          @select="menuSelect"
          router
        >
          <!-- 查询并展示父菜单项 -->
          <el-submenu
            :index="index.toString()"
            v-for="(value, index) in menuList"
            :key="index"
          >
            <template slot="title">
              <i :class="value.icon"></i>
              <span slot="title">{{ value.authName }}</span>
            </template>
            <!-- 查询并展示子菜单项 -->
            <el-menu-item
              :index="child.parent.toString() + '-' + child.id.toString()"
              v-for="(child, i) in value.children"
              :key="i"
            >
              <template>
                <span>{{ child.authName }}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 主页显示 -->
      <el-main>
        <!-- main部分的头部展示 -->
        <div class="main-top">
          <i
            :class="main_top_icon"
            @click="Collapse"
            style="margin-right: 10px"
          ></i>
          <!-- 头部面包屑部分 -->
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>{{ main_top_breadcrumb_1 }}</el-breadcrumb-item>
            <el-breadcrumb-item>{{ main_top_breadcrumb_2 }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <!-- 点击标签显示 -->
        <div class="eltag_class">
          <el-tag
            v-for="tag in tags"
            :key="tag.name"
            :closable="tags.length == 1 ? false : true"
            :type="tag.type"
            @click="selectTag(tag.index)"
            @close="closeTag(tag)"
          >
            {{ tag.name }}
          </el-tag>
        </div>
        <!-- main主体部分，由子路由实现 -->
        <div
          class="main"
          style="
            margin-top: 20px;
            padding: 10px 30px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12),
              0 0 6px rgba(0, 0, 0, 0.04);
          "
        >
          <!-- 路由占位符 -->
          <router-view></router-view>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: false,
      main_top_icon: "el-icon-s-fold",
      defaultActiveMenu: "1-2",
      main_top_breadcrumb_1: "商品模块",
      main_top_breadcrumb_2: "商品类别管理",
      menuList: [],
      tags: [],
      tagIndex: 0,
      tagTypeList: ["", "success", "info", "warning", "danger"],
      user: {},
      changePasswordFlag: false,
      passwordObj: {},
    };
  },
  beforeMount() {
    var user = JSON.parse(this.$session.getItem("user"));
    if (null != user) {
      this.user = user;
    } else {
      this.$router.replace("/login");
    }
  },
  mounted() {
    this.getMenu().then((data) => {
      this.menuList = data;
    });
    this.addTag(this.defaultActiveMenu);
  },
  methods: {
    Collapse() {
      this.isCollapse = !this.isCollapse;
      if (this.isCollapse) {
        this.main_top_icon = "el-icon-s-unfold";
      } else {
        this.main_top_icon = "el-icon-s-fold";
      }
    },
    menuSelect(index) {
      let indexs = index.split("-");
      let subMenuIndex = indexs[0];
      let childMenuIndex = indexs[1];
      // 渲染main头部导航文本
      for (let index = 0; index < this.menuList.length; index++) {
        const element = this.menuList[index];
        if (element.id == subMenuIndex) {
          this.main_top_breadcrumb_1 = element.authName;
          element.children.forEach((e) => {
            if (e.id == childMenuIndex) {
              this.main_top_breadcrumb_2 = e.authName;
            }
          });
          break;
        }
      }
      //添加tag
      this.addTag(index);
    },
    addTag(index) {
      const name = this.main_top_breadcrumb_2;
      let flag = 0;
      this.tags.forEach((element) => {
        if (element.name == name) {
          flag = 1;
        }
      });
      if (flag == 0) {
        let tag = {};
        tag.name = name;
        tag.type = this.tagTypeList[this.tagIndex];
        tag.index = index;
        if (this.tagIndex == 4) this.tagIndex = 0;
        this.tagIndex++;
        this.tags.push(tag);
      }
    },
    logout() {
      this.$router.replace("login");
    },
    getMenu() {
      return this.$http.get("aside-menu/findAll").then(function (response) {
        return response.data.result;
      });
    },
    getIndex(children) {
      console.log(children);
      return children.parent + "-" + children.id;
    },
    selectTag(index) {
      if (this.$route.path != "/" + index) {
        this.$router.replace("/" + index);
      }
    },
    closeTag(tag) {
      if (this.tags.length === 1) return;
      else {
        if (this.$route.path === "/" + tag.index) {
          this.tags.splice(this.tags.indexOf(tag), 1);
          this.selectTag(this.tags[this.tags.length - 1].index);
        } else {
          this.tags.splice(this.tags.indexOf(tag), 1);
        }
      }
    },
    changePassword() {
      var data = this.passwordObj;
      if(data.newPassword != data.newPasswordRepeat){
        this.$message.error("两次输入新密码不匹配");
        this.passwordObj = {};
        return;
      }
      data.type = this.user.type;
      data.username = this.user.username;
      this.$http.post("user/changePassword", data).then((response) => {
        this.passwordObj = {};
        this.$router.replace("login");
      });
    },
  },
};
</script>

<style scoped>
.container-outer {
  height: 100%;
}
.el-header {
  background-color: #c5464a;
  color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
}
.el-header > div {
  display: flex;
  align-items: center;
}
.el-header img {
  margin-right: 20px;
}
.el-header .el-login {
  position: absolute;
  right: 20px;
  color: #fff;
}
.container-main {
  height: 90%;
}
.el-aside {
  display: flex;
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  height: 100%;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  height: 100%;
  padding: 10px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 180px;
  min-height: 380px;
  font-size: 30px;
  font-weight: 800;
  text-align: left;
}
.el-menu-item {
  font-size: 13px;
  font-weight: 400;
  color: rgb(83, 82, 82);
}
.main-top {
  box-shadow: rgba(0, 0, 0, 0.1) 0 1px;
  height: 30px;
  vertical-align: middle;
  display: flex;
  align-items: center;
  line-height: 30px;
  font-size: 25px;
  color: #409eff;
  margin-bottom: 5px;
}
.eltag_class {
  margin: 6px 0;
  padding-bottom: 9px;
  box-shadow: rgba(0, 0, 0, 0.1) 0 1px;
}
.eltag_class .el-tag {
  margin: 2px 4px;
}
</style>
